$(() => {
  // 取数据模块
  function getData() {
    return localStorage.getItem('todolistDataZP') ? JSON.parse(localStorage.getItem('todolistDataZP')) : []
  }
  // 存数据模块
  function storageData(Data) {
    localStorage.setItem('todolistDataZP', JSON.stringify(Data))
  }
  //渲染模块
  renderer()
  function renderer() {
    //渲染之前先清空之前内容
    $('#todolist,#donelist').html('')
    //取数据
    let list = getData()
    //声明变量统计次数
    let i = 0
    let j = 0
    //遍历数据
    for (const [index, item] of list.entries()) {
      const li = $(`
        <li data-id=${index}> 
          <input type="checkbox" ${item.done ? 'checked' : ''}>
          <p>${item.title}</p> 
          <a href="javascript:;"></a>
        </li>
      `)
      item.done ? $('#donelist').append(li) && i++ : $('#todolist').append(li) && j++
    }
    //统计数据模块
    $('#todocount').text(j)
    $('#donecount').text(i)
  }
  //添加模块
  $('#title').on('keyup', function (e) {
    if (e.key === 'Enter') {
      if (!($(this).val())) return alert('请输入内容')
      const obj = {
        title: $(this).val(),
        done: false
      }
      //取数据
      let list = getData()
      // 改数据
      list.unshift(obj)
      //存数据
      storageData(list)
      $(this).val('')
      //渲染函数
      renderer()
    }
  })
  // 删除模块
  $('#donelist,#todolist').on('click', 'li>a', function () {
    //取数据
    let list = getData()
    //删数据
    list.splice($(this).closest('li').data().id, 1)
    //存数据
    storageData(list)
    //渲染函数
    renderer()
  })
  //统计完成模块
  $('#donelist,#todolist').on('change', 'li>input', function () {
    //取数据
    let list = getData()
    //定义索引
    let index = $(this).closest('li').data().id
    // 改数据
    list[index].done = !list[index].done
    //把点击的对象取出来
    const obj = list[index]
    //把点击的对象删掉
    list.splice(index, 1)
    //然后把刚才操作的对象添加到数组的最前面
    list.unshift(obj)
    //存数据
    storageData(list)
    //渲染函数
    renderer()
  })
})